// 1.根据实际需求 获取相关的DOM元素(标签)
var lunbotu = document.querySelector(".banner_content");
var uls = document.querySelector(".banner_content ul");
var lis = document.querySelectorAll(".banner_content ul li");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var points = document.querySelectorAll(".banner_content ol li");

// 检验是否成功获取相关标签
console.log("lunbotu",lunbotu);
console.log("uls",uls);
console.log("lis",lis);
// console.log("获取ul 里面的第1个li标签=>",lis[0]);
console.log("prev",prev);
console.log("next",next);
console.log("points",points);
// console.log("points=>",points.length);
// console.log("points=>",points.length - 1);

// 2. 先获取指定元素的宽度 就是轮播图片的宽度
// offsetWidth 偏移宽度值 = border+padding+innerWidth
var width = lis[0].offsetWidth;
console.log("轮播图片的宽度值 ==》",width);

// 设置图片的索引值 贯穿整个轮播图效果的全过程
var index = 0;

// 设置循环定时器ID
var timer = null;


// 3.1设置循环定时器函数
// timer = setInterval(function(){
//     index++;
//     if (index > 4) {
//         index = 0;
//     }

//     // 设置ul的left值
//     uls.style.left = -(index * width) + "px";
//     console.log("ul的left值==》", uls.style.left);
// },3000);

// 3.2 可以把循环定时器函数里面的匿名函数和循环时间分开
// timer = setInterval(函数名称，轮番时间)
timer = setInterval(changeImg,1000);

function changeImg(){
    index++;
    if(index > 4) {
        index = 0;
    }

    // 设置ul的left值
    uls.style.left = -(index * width) + "px";
    // console.log("ul的left值==》", uls.style.left);
    // 调用图片索引值函数  传入两个实际参数
    setpoints(points,index);
}
// 4.当鼠标移入轮播图 清除循环定时器 【静止图片轮播】
lunbotu.addEventListener("mouseover",function(){
    // console.log("当鼠标移入轮播图区域 清除循环定时器ID");
    // 清除循环定时器ID
    clearInterval(timer);
})

//5.当鼠标离开轮播图（先清除再开启）开启循环定时器【继续让图片轮播】
lunbotu.addEventListener("mouseout",function(){
    // console.log("当鼠标移入轮播图区域 清除循环定时器ID");
    // 清除循环定时器ID
    clearInterval(timer);

    // 当鼠标完全离开图片区域 才会再次开启循环定时器
    timer = setInterval(changeImg,1000);
})


// 6.点击左边按钮 切换到当前图片的上一张图片
prev.onclick = function() {
     console.log("鼠标点击左边按钮啦");

    // 先清除循环定时器ID
     clearInterval(timer);

     index --;

     if (index < 0) {
        index = 4;
     }

    uls.style.left = -(index * width) + "px";
    // console.log("ul的left值==》", uls.style.left);

    // 继续调用图片索引值函数  传入两个实际参数
     setpoints(points,index);
}

// 7.点击右边按钮 切换到当前图片的下一张图片
next.onclick = function() {
     console.log("鼠标点击右边按钮啦");

    // 先清除循环定时器ID
     clearInterval(timer);

     index ++;


     if (index > 4) {
        index = 0;
    }

    // 设置ul的left值
     uls.style.left = -(index * width) + "px";
    // console.log("ul的left值==》", uls.style.left);

    // 继续调用图片索引值函数  传入两个实际参数
     setpoints(points,index);
}
// 8. 点击右下角的小图片[给小图片添加点击事件] 切换相应的轮播图
// for循环遍历(访问)所有ol下的li标签
for (var i = 0; i < points.length; i++) {
    // 给li进行属性绑定
    points[i].count = i;

    points[i].addEventListener("click", function(){

        newCount = this.count;
        console.log("newCount==",newCount);

        uls.style.left = -(newCount * width) + "px";
    // console.log("ul的left值==》", uls.style.left);

    // 继续调用图片索引值函数  传入两个实际参数
        setpoints(points,newCount);
    })
}
// 9. 定义图片索引值函数
function setpoints(a,b) {//a和b是形式参数 没有实际意义
    // 排他思想
    for (var j = 0; j < points.length; j++) {
        // 给ol下的所有li标签都移除active类名
        a[j].classList.remove("active");
    }
    // 给予轮播图相对应的图片索引值 添加active类名
    a[b].classList.add("active");
}